<template>
  <div>
    <DynamicTable
        :dataRequest="loadTableData"
        :columns="columns"
        row-key="id"
        showIndex
        showSelection
        :table-props="tableProps"
        :nav-props="navProps"
        @selection-change="handleSelectionChange">
    </DynamicTable>
  </div>
</template>

<script>
import {getColumns} from './columns'

export default {
  data() {
    return {
      multipleSelection: [],
      tableProps: {
        //  表格属性
      },
      navProps: {
        //  表格顶部导航栏属性
        label: '表格演示'
      },
      columns: getColumns.call(this)
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log('多选表格', this.multipleSelection)
    },
    editRow(row) {
      console.log(row)
    },
    deleteRow(row) {
      console.log(row)
    },
    loadTableData({page, pageSize, ...rest}) {
      const names = ['王海龙', '李家威', '廖伟权', '卜启缘']
      const hotelTypes = ['22', '33', '44', '66', '77']
      const filterKeys = Object.keys(rest)
      return new Promise(resolve => {
        setTimeout(() => {
          let data = Array.from({length: 30}).map((_, i) => ({
            id: i + 1,
            date: '2016-05-02',
            name: names[~~(Math.random() * 4)],
            province: '上海',
            hotelType: hotelTypes[~~(Math.random() * 5)],
            sex: ~~(Math.random() * 2),
            status: ~~(Math.random() * 2)
          }))

          if (filterKeys.length) {
            data = data.filter(n => filterKeys.some(key => {
              if (typeof rest[key] === 'number') {
                return rest[key] === n[key]
              } else {
                return n[key].includes(rest[key])
              }
            }))
          }

          resolve({
            list: data.slice((page - 1) * pageSize, page * pageSize),
            page: page,
            pageSize: pageSize,
            total: data.length
          })
        }, 1000)
      })
    }
  }
}
</script>
